<template>
    <div class="white-box">
        <el-table class="table-mb" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)" v-loading="loading">
            <el-table-column prop="version_id" label="ID" width="100"></el-table-column>
            <el-table-column prop="title" label="版本名称" width="200"></el-table-column>
            <el-table-column prop="version" label="版本号"></el-table-column>
            <el-table-column prop="version_price" label="金额" width="120"></el-table-column>
            <el-table-column prop="updated_at_label" label="添加时间" width="160"></el-table-column>
            <el-table-column prop="intro" label="版本备注" min-width="260"></el-table-column>
            <el-table-column label="操作" width="180" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button class="theme-btn" link type="primary" @click="handleEdit(row)">
                        编辑
                    </el-button>
                    <el-button class="theme-btn" link type="primary" @click="toDetail(row)">
                        查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
            :total="totalNums" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, watch } from "vue"
import { useRouter, onBeforeRouteLeave } from "vue-router"
import { userStore } from "@store/user"
import OneLoad from "@mixins/one-load"

const store = userStore()
const { proxy } = getCurrentInstance()
const router = useRouter();

onMounted(() => {
    getList()
})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (to.name === "ConfigEditionDetail") {
        store.setInclude("ConfigEdition")
    } else {
        store.delInclude("ConfigEdition")
    }
    next()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, search_btn, totalNums, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("version/index", params)
}

// 编辑
const handleEdit = (row) => {
    router.push({
        path: '/Config/ConfigEditionEdit',
        query: {
            id: row.version_id
        }
    })
}

// 详情
const toDetail = (row) => {
    router.push({
        path: '/Config/ConfigEditionDetail',
        query: {
            id: row.version_id
        }
    })
}
</script>

<script>
export default {
    name: "ConfigEdition",
}
</script>

<style lang="less" scoped>
</style>


<style>
.el-tooltip__popper {
    max-width: 20%
}
</style>